<template>
  <div id="credit-circle">
    <img class="publish" @click="issue" src="../../static/img/fabu@2x.png" />
    <scroller lock-x scrollbar-y use-pullup use-pulldown @on-pullup-loading="loadMore" @on-pulldown-loading="refresh" v-model="status" ref="scroller" :pulldown-config="pullConfig">
      <div class="box2">
        <div v-for="(item, index) in creditlist" :key="index" style="height:100%">
          <ul class="circle-content" @click.prevent="contentdetail(index)">
            <li>
              <img class="install-headerimg" v-if="item.userHeadImage" :src="item.userHeadImage" />
              <img class="install-headerimg" v-else src="../../static/img/installheaderimg.jpg" />
              <div><p>{{item.userName}}</p><p>{{item.createTime | timecircle}}</p></div>
              <attention :itematt="item"></attention>
            </li>
            <li>{{item.title}}</li>
            <li v-if="item.picUrl"><img :src="item.picUrl" /></li>
          </ul>
          <card class="card-content">
            <div slot="content" class="card-demo-flex card-demo-content01">
              <div class="vux-1px-l vux-1px-r" @click="replycontent(index)">
                <img src="../../static/img/pinglun@2x.png" />{{item.commentCnt}}
              </div>
              <div class="line"></div>
              <div class="vux-1px-r">
                <img src="../../static/img/guanzhu@2x.png" />{{item.watchCnt}}
              </div>
            </div>
          </card>
          <content-commit :i="item"></content-commit>
          <add v-if="index === 1" :addposition="2"></add>
        </div>
      </div>
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
        <span v-show="status.pullupStatus === 'default'"></span>
        <span class="pullup-arrow" v-show="status.pullupStatus === 'down' || status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
        <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
      </div>
    </scroller>
  </div>
</template>
<script>
import Add from '../comment/Add'
import Attention from '../comment/Attention'
import ContentCommit from '../agencycenter/creditcircle/ContentCommit'
import { Card, Scroller, Spinner } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  data () {
    return {
      creditlist: [],
      showlist: [],
      PageNum: 100, // 记录每页数
      count: 1,
      pullupEnabled: true,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      },
      pullConfig: {
        loadingContent: '加载中',
        content: '下拉加载数据',
        upContent: '下拉加载数据',
        downContent: '松开刷新'
      }
    }
  },
  components: {
    Card,
    Add,
    ContentCommit,
    Attention,
    Scroller,
    Spinner
  },
  created () {
    window.document.title = '信贷圈子'
    this.loadmore(this.PageNum)
    utils.jssdkwx(api, this.$wechat, this.$store)
  },
  methods: {
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.PageNum)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    refresh () {
      this.PageNumn = 100
      this.count = 1
      setTimeout(() => {
        this.loadmore(this.PageNumn)
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.scroller.donePulldown()
            this.pullupEnabled && this.$refs.scroller.enablePullup()
          }, 10)
        })
      }, 2000)
    },
    loadmore (index) {
      var params = {
        userid: this.$store.state.userID,
        page: 1,
        perPage: index
      }
      api.creditcircle(params).then(res => {
        console.log(res)
        if (res.status === 200) {
          this.creditlist = res.data.list
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'warn',
            width: '4rem'
          })
        }
      })
    },
    // 内容回复
    replycontent (index) {
      this.$router.push('/circle/reply?circle_id=' + this.creditlist[index].id)
    },
    // 我要发布
    issue () {
      window.location.href = '/circle/myissue'
    },
    contentdetail (index) {
      this.$router.push('/circle/detail?circle_id=' + this.creditlist[index].id)
    }
  }
}
</script>
